<template>
  <div>
    <p>子组件绑定 标题： {{ title }}</p>
    <p>子组件绑定 内容： {{ msg }}</p>
    <hr />
    <!-- 子组件通过 defineModel 自动处理双向绑定。 多条绑定 -->
    <input type="text" v-model="title" />
    <input type="text" v-model="msg" />
    <hr>

    <!-- 子组件通过 defineModel 自动处理双向绑定。 多条绑定对象绑定 -->
     <input type="text" v-model="bookInfo.title">
     <input type="text" v-model="bookInfo.author">
     <input type="text" v-model="bookInfo.year">
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue';
export interface Book {
  title: string;
  author: string;
  year: number;
}
// 子组件通过 defineModel 自动处理双向绑定。 多条绑定
const title = defineModel('title', { type: String, required: true });
const msg = defineModel('msg', { type: String, required: true });
// 子组件通过 defineModel 自动处理双向绑定。 多条绑定对象绑定
const bookInfo = defineModel('book', {
  type: Object as PropType<Book>,
  default() {
    return {
      title:'第二本书',
      author:"小美",
      year:3000
    };
  },
});
</script>

<style>
input {
  border: none;
  height: 30px;
  border-radius: 15px;
  line-height: 30px;
  font-size: 15px;
  color: white;
  padding-left: 2rem;
  background-color: #409eff;
  margin: 5px;
}
</style>
